<template>
  <!-- 顶部内容, 书写在这里, 通过传送门(teleporter) 放在顶部内 -->
  <teleport to=".header">
    <SdyHeader home="home" center="search" />
  </teleport>

  <div class="container">
    <!-- 轮播图 -->
    <sdyHomeBanner />

    <!-- 九宫格分类 -->
    <sdyHomeGrid />

    <!-- 秒杀 + 热门商品 -->
    <sdyHomeHot />

    <!-- 商品列表 -->
    <sdyHomeList />
  </div>

  <!-- 回到顶部按钮 -->
  <van-back-top class="back-top" right="20px" bottom="80px" />
</template>

<script name="sdyHome" lang="ts" setup>
import SdyHeader from '../../components/header.vue'
import sdyHomeBanner from './components/banner.vue'
import sdyHomeList from './components/list.vue'
import sdyHomeHot from './components/hot.vue'
import sdyHomeGrid from './components/grid.vue'
</script>

<style scoped lang="scss">
.container {
  background-color: #F6F6F6;
}
</style>
